<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加商品</title>

    <base href="http://localhost/resources/back/">

    <link href="css/H-ui.min.css" rel="stylesheet" type="text/css"/>
    <link href="css/H-ui.admin.css" rel="stylesheet" type="text/css"/>
    <link href="lib/icheck/icheck.css" rel="stylesheet" type="text/css"/>
    <link href="lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css"/>
    <link href="http://localhost/resources/back/lib/My97DatePicker/skin/default/datepicker.css" rel="stylesheet"
          type="text/css">
    <link rel="stylesheet" type="text/css" href="lib/webuploader/0.1.5/webuploader.css">

    <script type="text/javascript" src="http://localhost/resources/back/lib/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript" src="http://localhost/resources/back/lib/My97DatePicker/lang/zh-cn.js"></script>
    <script type="text/javascript" src="http://localhost/resources/back/lib/My97DatePicker/calendar.js"></script>
</head>


<body>
<div class="pd-20">
    <form action="" method="post" class="form form-horizontal" id="form-goods-add">
        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>商品名：</label>
            <div class="formControls col-5">
                <input type="text" class="input-text" name="gname" placeholder=""
                       datatype="*2-16" nullmsg="商品名不能为空">
            </div>
            <div class="col-4"></div>
        </div>

        <div class="row cl">
            <label class="form-label col-3">父级商品类型：</label>
            <div class="formControls col-5"> <span class="select-box" style="width:150px;">
				<select class="select" id="typepid" name="typepid" size="1">

				</select>
				</span></div>
        </div>

        <div class="row cl">
            <label class="form-label col-3">子级商品类型：</label>
            <div class="formControls col-5"> <span class="select-box" style="width:150px;">
				<select class="select" id="typeid" name="typeid" size="1">

				</select>
				</span></div>
        </div>

        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>商品描述：</label>
            <div class="formControls col-5">
                <textarea type="text" rows="5" class="textarea" name="gdesc" placeholder="商品描述。。。。。。"
                          datatype="*" nullmsg="商品描述不能为空"></textarea>
            </div>
            <div class="col-4"></div>
        </div>


        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>库存：</label>
            <div class="formControls col-5">
                <input type="text" class="input-text" name="count" placeholder=""
                       datatype="n" nullmsg="请输入价格">
            </div>
            <div class="col-4"></div>
        </div>

        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>价格：</label>
            <div class="formControls col-5">
                <input type="text" class="input-text" name="gprice" placeholder=""
                       datatype="n" nullmsg="请输入价格">
            </div>
            <div class="col-4"></div>
        </div>

        <input id="png" type="hidden" name="gpng">

        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>商品图片：</label>
            <div id="uploader-demo" class="formControls col-5">
                <!--用来存放item-->
                <div id="fileList" class="uploader-list"></div>
                <div id="filePicker">选择图片</div>
            </div>
            <div class="col-4"></div>
        </div>


        <div class="row cl">
            <div class="col-9 col-offset-3">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</div>
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/icheck/jquery.icheck.min.js"></script>
<script type="text/javascript" src="lib/Validform/5.3.2/Validform.min.js"></script>
<script type="text/javascript" src="lib/layer/1.9.3/layer.js"></script>

<script type="text/javascript" src="js/H-ui.js"></script>
<script type="text/javascript" src="js/H-ui.admin.js"></script>

<!--引入JS-->
<script type="text/javascript" src="lib/webuploader/0.1.5/webuploader.js"></script>

<script type="text/javascript">

    var uploader = WebUploader.create({

        // 选完文件后，是否自动上传。
        auto: true,

        // 文件接收服务端。
        server: 'http://localhost/resources/file/upload',

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#filePicker',

        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        }
    });

    uploader.on('fileQueued', function (file) {
        var $li = $(
            '<div id="' + file.id + '" class="file-item thumbnail">' +
            '<img>' +
            '<div class="info">' + file.name + '</div>' +
            '</div>'
            ),
            $img = $li.find('img');

        // $list为容器jQuery实例
        $("#fileList").append($li);

        uploader.makeThumb(file, function (error, ret) {
            if (error) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }
            $img.attr("src", ret);
        }, 100, 100);

    });
    uploader.on('uploadSuccess', function (file, resp) {
        var raw = resp._raw;

        var png = $("#png");
        var val = png.val();
        if (val) {
            raw = val + "|" + raw;
        }
        png.val(raw);

    });


    $("#typepid").change(function () {
        var id = $("#typepid").val();
        console.info(id);
        $.ajax({
            url: "http://localhost/back/goodstype/findByPid?pid=" + id,
            method: "GET",
            dateType: "JSON",
            success: function (data) {
                var elm = $("#typeid");
                elm.empty();
                for (var i = 0; i < data.length; i++) {
                    var element = document.createElement("option");
                    element.value = data[i].id;
                    element.text = data[i].name;
                    elm.append(element);
                }
            }
        })
    });


    $(function () {

        //加载父级商品类型
        $.ajax({
            url: "http://localhost/back/goodstype/findByPid?pid=-1",
            method: "GET",
            dateType: "JSON",
            success: function (data) {
                var pElm = $("#typepid");
                for (var i = 0; i < data.length; i++) {
                    var element = document.createElement("option");
                    element.value = data[i].id;
                    element.text = data[i].name;
                    pElm.append(element);
                }
            }

        });


        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });

        $("#form-goods-add").Validform({
            tiptype: 2,
            callback: function (form) {
                debugger;
                var fromArray = form.serializeArray();
                var param = new Object();
                for (var i = 0; i < fromArray.length; i++) {
                    var n = fromArray[i].name; // 表单元素的name属性
                    var v = fromArray[i].value; // 表单元素对应的值
                    console.info(n+"----->"+v)
                    param[n] = v;
                }
                console.info(param);
                $.post("http://localhost/back/goods/add", param, function (data) {
                    if (data.status == "success") {
                        layer.msg('操作成功', {icon: 1, time: 1000}, function () {
                            var index = parent.layer.getFrameIndex(window.name);
                            // 关闭层
                            parent.layer.close(index);
                        });

                    } else {
                        layer.msg(data.msg, {icon: 2, time: 1000});
                    }

                }, "JSON");
                return false;
            }
        });
    });
</script>
</body>
</html>